<template>
    <div>
        <div class="content">
            <div class="static">
                <div class="titler">
                    <img src="../../assets/头部.png" alt="">
                </div>
                <div class="wrap">
                    
                    <div class="wrap_anniu">
                        <router-link to="./">
                            <van-icon name="arrow-left" size="0.22rem" />
                        </router-link>
                        
                    </div>
                    <div class="wrap_text">我的购物车({{cartlist.length}})</div>
                </div>
            </div>
            <div class="shop">
                <div class="shop_commodity" v-for="item in cartlist" :key="item">
                     <!-- 按钮 -->
                     <van-checkbox 
                     v-model="item.checked" 
                     class="checked" />
                    <div class="shop_commodity_image">
                        <img :src="item.s_good.s_goods_photos[0].path" alt="">
                    </div>
                    <div class="shop_commodity_wrap">
                        <div class="shop_commodity_wrap_name">{{item.s_good.name}}</div>
                        <div class="shop_commodity_wrap_desc">{{item.s_good.desc}}</div>
                        <div class="shop_commodity_wrap_money">
                            <div class="yan">￥：{{item.s_good.price}}</div>
                            <van-stepper v-model="item.num"  
                            @plus="plus(item.goods_id)"
                            @minus="minus(item.goods_id)"
                            theme="round" button-size="22" disable-input />
                        </div>
                    </div>
                    
                </div>
                <div class="shop_footer">
                        <div class="shop_footer_a">
                            <!-- 全选 -->
                            <van-checkbox 
                            v-model="checkAll"
                            >全选</van-checkbox>
                        </div>
                        <div class="shop_footer_b">合计：￥{{shopSum}}</div>
                        <div class="shop_footer_c">
                            <van-button round type="danger" @click="delShopCart">删除</van-button>
                            <van-button round type="primary" @click="submitorder">结算</van-button>
                        </div>
                    </div>
            </div>
        </div>
        
        <Docker />
    </div>
</template>


<script setup>
import { useStore } from 'vuex' // 引入useStore 方法
import {useRouter} from 'vue-router'
import { Dialog } from 'vant';
// import { Button } from 'vant'
// import { Icon } from 'vant';
// import { SubmitBar } from 'vant';
// import { Stepper } from 'vant';
import Docker from '../../components/Docker.vue';
// import { Checkbox} from 'vant';
import {ref,computed}from 'vue'
import { get ,post,del,put} from "../../utils/request.js";
// import { storeKey } from 'vuex';
// import { isTemplateElement } from '@babel/types';
const router = useRouter()
const store = useStore()  // 该方法用于返回store 实例

let cartlist =ref([])

const checked = ref(false);
const Allchecked = ref(false)
const value = ref(1);

// 遍历添加checked属性
function addChecked(arr) {
  arr.forEach((ele) => {
    ele.checked = false;
  });
}

// 获取购物车商品信息
let GetshoppingCart = async()=>{
    let res = await get(`/shoppingCart?project_id=244`)
    cartlist.value = res.result;
    addChecked(cartlist.value);
    console.log(cartlist.value);
    store.commit('cart/setCart', cartlist.value)
}
GetshoppingCart()


// 更改商品数量
//点击按钮+
let plus =  async(id)=>{

        let data = JSON.stringify({
           "goods_id": id,
           "num": 1,
           "project_id": "244"
        });
        let res= await post(`/shoppingCart`,data)
        // cartlist.value = res.result;
        console.log(res);  
    };
//点击按钮-
let minus =  async(id)=>{

        let data = JSON.stringify({
           "goods_id": id,
           "num": -1,
           "project_id": "244"
        });
        let res= await post(`/shoppingCart`,data)
        console.log(res);  
        
    };




//全选按钮
const checkAll = computed({
  get() {
    let arr = cartlist.value;
    let res = arr.every((ele) => ele.checked == true);
    return res;
  },
  set(val) {
    console.log(val);
    cartlist.value.forEach((ele) => {
      ele.checked = val;
    });
  },
});

// console.log(cartlist);

// 删除购物车列表
const delShopCart = async () => {
    let res = cartlist.value.filter((ele) => ele.checked === true)
    res = res.map( item => item.id )
    for(let i=0;i<res.length;i++){
       await del("/shoppingCart/" + res[i]);
       GetshoppingCart();
    }
};



// 合计
const shopSum = computed(() => {
  let res = cartlist.value.filter((ele) => ele.checked === true);
  let sum = res.reduce((sum, item) => {
    return (sum += item.s_good.price * item.num );
  }, 0);
  return sum;
});


// 结算
let submitorder =()=>{
    //弹窗
    Dialog.confirm({
        title: '商品结算',
        message:
            '请确认是否跳转到填写订单页',
    })
    .then(() => {
        // 向订单页传递参数
        let res = cartlist.value.filter((ele) => ele.checked === true);
        router.push({
            name:'Submitorder',
            query:{orderlist:JSON.stringify(res)}
            })
    })
    .catch(() => {
    // on cancel
        router.push("/shopping")
    });
}

</script>

<style lang="scss" scoped>

.content{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0.5rem;
    overflow-y:auto;
}

.static{
    height: 0.64rem;
    background-color: #FFFFFF 100%;
}
.titler{
    width: 100%;
    height: 0.2rem;
}
.wrap{
    display: flex;
    margin-top: 0.11rem;
    width: 100%;
    height: 0.22rem;
    font-size: 0.16rem;
    line-height: 0.22rem;
    background-color: #F8F8F8;

    .wrap_anniu{
        padding-left: 0.1rem;
        width: 0.3rem;
        height: 100%;

    }
    .wrap_text{
        margin-left: 1rem;
        width: 1.5rem;
        height: 100%;
    }
}

.shop{
    background-color: #F8F8F8;
    overflow: hidden;

}
.shop_commodity{
    display: flex;
    margin-top: 0.16rem;
    // margin-bottom: 0.2rem;
    display: flex;
    width: 100%;
    height: 1.5rem;
    background: #FFFFFF;
    box-shadow: 0 0.08rem 0.16rem 0 rgba(0,0,0,0.08);

    .checked{
        margin-left: 0.1rem;
        width: 0.3rem;
        height: 100%;
    }
    .shop_commodity_image{
        margin-top: 0.02rem;
        width: 1.4rem;
        height: 95%;
        background: #FFFFFF;
        border:0.01rem solid #fff;
        box-shadow: 0 0.08rem 0.16rem 0 rgba(0,0,0,0.08);

        img{
            width: 1.4rem;
            height: 90%;
        }
    }
    .shop_commodity_wrap{
        width: 1.86rem;
        height: 100%;
    }
    .shop_commodity_wrap_name{
        margin-top: 0.01rem;
        padding-left: 0.1rem;
        width: 100%;
        height: 0.3rem;
        font-size: 0.16rem;
    }
    .shop_commodity_wrap_desc{
        padding-left: 0.1rem;
        margin-top: 0.1rem;
        width: 100%;
        height: 0.3rem;
        font-size: 0.12rem;
        line-height: 0.2rem;
    }
    .shop_commodity_wrap_money{
        display: flex;
        margin-top: 0.3rem;
        width: 100%;
        height: 0.5rem;

        .yan{
            padding-left: 0.05rem;
            width: 0.8rem;
            height: 100%;
            font-size: 0.16rem;
            line-height: 0.7rem;
        }
        .van-stepper{
            margin-top: 0.23rem;
            margin-left: 0.2rem;
        }
    }
}
.shop_footer{
    position:fixed;
    display: flex;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    width: 100%;
    height: .49rem;
    border:none;
    // background-color: red;

    .shop_footer_a{
        margin-top: 0.15rem;
        margin-left: 0.1rem;
        width: 0.55rem;
        height: 0.21rem;
    }
    .shop_footer_b{
        margin-top: 0.18rem;
        margin-left: 0.3rem;
        width: 1.2rem;
        height: 0.2rem;
        font-size: 0.16rem;
        color: red;

    }
    .shop_footer_c{
        width: 1.6rem;
        height: 0.5rem;

        .van-button{
            margin-top: 0.05rem;
            margin-left: 0.15rem;
            height: 0.35rem;
        }

    }
}

</style>